<template>
	<view>
		<view class="submit">
			<view class="submit-chat">
				<view class="bt-img">
					
					<image src="../../static/images/chatroom/yy2x.png" class="voice-img" @tap="changeSendFun()" v-if="!isRecord"></image>
				<image src="../../static/images/submit/jp.png" class="voice-img text-img" @tap="changeSendFun()" v-else></image>
				</view>
				<textarea auto-height="true" class="chat-send btn"  v-if="!isRecord"  v-model="message" ></textarea>
				<view class="record btn" :style="{background:voicecolor}"  @touchstart="startSpeaker" @touchend="endSpeaker" @touchmove="touchmove" v-else v-text="recordTip">
					
				</view>
				<view class="bt-img">
					<image src="../../static/images/chatroom/bq2x.png" @tap="emoji()"></image>
				</view> 
				<view class="bt-img">
					<image src="../../static/images/chatroom/tj2x.png" v-show="!message.length" @tap="showMore()"></image>
					<view class="send" v-show="message.length" @tap="inputs"><view class="btnbox">发送</view></view>
				</view>
			</view>
			<view class="emoji" v-show="isEmoji">
				<emoji @addEmoji="emotion" @deleteContent="deleteContent"></emoji>
			</view>
			
			<view class="more" v-show="isMore">
				<view class="more-list" @tap="getImage('album')">
					<image src="../../static/images/submit/tp.png"></image>
					<view class="more-list-title">
						图片
					</view>
				</view>
				
				<view class="more-list" @tap="getImage('camera')">
					<image src="../../static/images/submit/pz.png"></image>
					<view class="more-list-title">
						拍摄
					</view>
				</view>
				
				<view class="more-list" @tap="tonghua()">
					<image src="../../static/images/submit/sp.png"></image>
					<view class="more-list-title">
						视频
					</view>
				</view>
				
				<view class="more-list" @tap="getLocation()">
					<image src="../../static/images/submit/dw.png"></image>
					<view class="more-list-title">
						位置
					</view>
				</view>
				<view class="more-list" @tap="wenjian()">
					<image src="../../static/images/submit/wj.png"></image>
					<view class="more-list-title">
						文件
					</view>
				</view>
				<view class="more-list" @tap="AI()">
					<image src="../../static/images/submit/jiqiren.png"></image>
					<view class="more-list-title">
						帮你聊
					</view>
				</view>
				<view class="more-list" @tap="tiangou()">
					<image src="../../static/images/submit/gou.png"></image>
					<view class="more-list-title">
						舔狗语录
					</view>
				</view>
			</view>
		
		</view>
		<view class="voice-bg"  v-show="voiceBg">
			<view class="voice-bg-length">
				<view class="voice-bg-time" :style="{width:vlength/0.6+'%'}">
					{{vlength}}″
				</view>	
			</view>
			<view class="voice-del">
				上划取消录音
			</view>
		</view>
	</view>
</template>

<script>
	const recorderManager = uni.getRecorderManager();
	
	import emoji from '../emoji/emoji.vue';
	export default {
		name:"submit",
		comments:{
			emoji,
		},
		data() {
			return {
				isRecord:false,
				isEmoji:false,
				message:'',
				isMore:false,
				timer:'',
				vlength:0,
				voiceBg:false,
				pageY:0,
				recordTip:'按住 说话',
				voicecolor:'#FFF',
			};
		},
		// created() {
		// 	this.initWebSocket();
		// },
		methods:{
			//获取模块高度
			getSuHeight(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.submit').boundingClientRect(data => {
				 this.$emit('heights',data.height)
				}).exec();
			},
			//切换发送模式
			changeSendFun(){
				
				this.isEmoji = false
				this.isMore = false
				this.isRecord = !this.isRecord;
				setTimeout(()=>{
					this.getSuHeight();
				},10)//要为10
			},
			//表情
			emoji(){
				//
				this.isRecord = false
				this.voiceBg = false
				this.isMore = false
				this.isEmoji = !this.isEmoji
				setTimeout(()=>{
					this.getSuHeight();
				},10)//要为10
			},
			//文字发送
			inputs:function(){
				
				 // let e = window.event || arguments[0];
				 //      // console.log(e,e.keyCode)
				 //      if (e.key == 'Enter' || e.code == 'Enter' || e.keyCode == 13) {
						  if (!this.message.match(/^[ ]*$/)) {
							  this.send(this.message,0)
							 this.message = ''
						  }
						  else{
							  uni.showToast({
							      title: '不能发空白消息',
							      duration: 2000,
								  icon:"none"
							  });
						  }
				        // e.returnValue = false;
				        // return false;
				      // }
				// console.log(e)
				// console.log(this.message)
				// this.message =e.detail.value.substring(0, basic.length - 1); 
			
			},
			clean(){
				this.message = ''
			},
			//接受表情
			emotion(e){
				this.message += e
			},
			//删除表情
			deleteContent(){
				this.message =this.message.substring(0, this.message.length - 1); 
			},
			//发送
			send(msg,type){
				let data = {
					msgs:msg,
					types:type
				}
				this.$emit('userMsg',data);
			},
			//跟多
			showMore(){
				this.isEmoji = false
				this.isMore =!this.isMore
				setTimeout(()=>{
					this.getSuHeight();
				},10)//要为10
			},
			//音频处理
			//开始说话
			startSpeaker:function(e){
				// #ifdef H5
				uni.showToast({
					title: "网页环境下不能使用语音功能！待开发人员后续攻克!",
					duration: 2000,
					icon:"none"
				});
				// #endif
				// #ifdef APP-PLUS
				this.vlength = 0
				this.voicecolor = '#F5F5F5'
				this.recordTip = "松开 发送"
				this.pageY = e.changedTouches[0].pageY
				this.voiceBg = true
				//console.log("开始")
				let i = 1;
				this.timer = setInterval(()=>{
					this.vlength = i;
					i++;
					//console.log(i)
					if(i>60){
						this.voiceBg = false
						clearInterval(this.timer)
						//提交音频
						this.endSpeaker()
					}
				},1000)
				recorderManager.start();
				// #endif
			},
			//结束说话
			endSpeaker(){
				
					// #ifdef APP-PLUS
				clearInterval(this.timer)
				recorderManager.stop();
				recorderManager.onStop(res =>{
				if(this.voiceBg){
					console.log("this.vlength",this.vlength)
								 uni.uploadFile({
								            url: this.serverUrl+'/fileUpload/audio/'+uni.getStorageSync("userInfo").username, //仅为示例，非真实的接口地址
								            filePath: res.tempFilePath,
								            name: 'file',
								            success: (uploadFileRes) => {
												let data = {
													voice : uploadFileRes.data,
													length : this.vlength
												}
								 			   this.send(data,2)
								            },
								        });
											
							}
					this.recordTip = '按住 说话'
					// this.vlength = 0
					this.voicecolor = "#FFF"
					this.voiceBg = false
				        });
						// #endif
			},
			//录音取消
			touchmove:function(e){
				if(this.pageY - e.changedTouches[0].pageY >100){
					this.voiceBg = false
					this.endSpeaker();
				}
			},
			//获取定位
			getLocation(){
				uni.chooseLocation({
				    success: res => {
						let data = {
							name : res.name,
							address : res.address,
							latitude: res.latitude,
							longitude:res.longitude
						}
						let msg = {
							id : "liuxiao",
							message:data,
							type : 2
						}
						this.send(data,3)
				        // console.log('位置名称：' + res.name);
				        // console.log('详细地址：' + res.address);
				        // console.log('纬度：' + res.latitude);
				        // console.log('经度：' + res.longitude);
				    }
				});
			},
			AI(){
				uni.request({
				    url: 'https://api.muxiaoguo.cn/api/caihongpi', //仅为示例，并非真实接口地址。
				    success: (res) => {
						console.log(res.data.data.comment)
				         this.send(res.data.data.comment,0);
				       // this.text = 'request success';
				    }
				});
			},
			tiangou(){
				uni.request({
				    url: 'https://qqlykm.cn/api/diary/index?key=KuqJ5FHqjFcE7UOyrwt3s9tQfw', //仅为示例，并非真实接口地址。
				    success: (res) => {
						console.log(res)
						// console.log(res.data.data.comment)
				  //        this.send(res.data.data.comment,0);
				        this.send(res.data.data,0);
				       // this.text = 'request success';
				    }
				});
			},
			//图片发送
			getImage(e){
				let count = 9;
				if( e == 'album'){//从相册选择
					count = 9;
				//	console.log('图片')
				}
				else{
					count = 1
				//	console.log('相机')
				}
				uni.chooseImage({
				    count: count, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: [e], 
				    success: res=> {
						for(var i=0;i<res.tempFilePaths.length;i++){
							uni.uploadFile({
							           url: this.serverUrl+'/fileUpload/image/'+uni.getStorageSync("userInfo").username, //仅为示例，非真实的接口地址
							           filePath: res.tempFilePaths[i],
							           name: 'file',
							           success: (uploadFileRes) => {
										   console.log(uploadFileRes.data)
										   this.send(uploadFileRes.data,1)
							           },
							       });
						}
				        // console.log(JSON.stringify(res.tempFilePaths));
				    }
				});
			},
			tonghua(){
				uni.showToast({
					title: "该功能尚未开发!",
					duration: 1000,
					icon:"none"
				});
			},
			wenjian(){
				uni.showToast({
					title: "该功能尚未开发!",
					duration: 1000,
					icon:"none"
				});
			}
			}
	}
</script>

<style lang="scss">
.submit{
	background-color: rgba(244, 244, 244, 0.96);
	border-top: 1px solid $uni-border-color;
	width: 100%;
	position: fixed;
	bottom: 0;
	z-index: 1002;
	padding-bottom: env(safe-area-inset-bottom);
}

.submit-chat{
	width: 100%;
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
	padding: 14rpx 14rpx;
	image{
		width: 56rpx;
		height: 56rpx;
		margin: 0 10rpx;
		flex: auto;
		
	}
	.btn{
		flex: auto;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		max-height: 160rpx;
		margin: 0 10rpx;
		line-height: 44rpx;
	}
	// .chat-send{
	// 	line-height: 42rpx;
	// }
	.send {
		width: 120rpx;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		.btnbox {
			height: 56rpx;
			line-height: 56rpx;
			color: white;
			border-radius: 10rpx;
			width: 90%;
			margin-right: 10%;
			font-size: 30rpx;
			background: rgb(4, 179, 4);
			text-align: center;
			margin-bottom: 12rpx;
		}
	}
	.record{
		text-align: center;
		font-size:30rpx;
		// color: $uni-text-color-grey;
	}
	// .displaynone{
	// 	display: none;
	// }
}
.emoji{
		height: 460rpx;
		width: 100%;
		background-color: rgba(236,237,238,1);
		box-shadow: 0px -1rpx 0px 0px rgba(0,0,0,0.1);
		
		//新增内容  还修改了 userDetail的内容
		bottom: env(safe-area-inset-bottom);
	}
	.more{
		height: 436rpx;
		width: 100%;
		background-color: rgba(236,237,238,1);
		box-shadow: 0px -1rpx 0px 0px rgba(0,0,0,0.1);
		
		//新增内容  还修改了 userDetail的内容
		bottom: env(safe-area-inset-bottom);
			padding:8rpx 20rpx;
			box-sizing: border-box;
		.more-list{
			width: 25%;
			text-align: center;
			float: left;
			padding-top: 32rpx;
			image{
				width: 72rpx;
				height: 72rpx;
				padding: 24rpx;
				background-color: rgba(255,255,255,1);
				border-radius: 24rpx;
			}
				
			.more-list-title{
				font-size: 24rpx;
				color: rgba(39,40,50,0.5);
				line-height: 34rpx;
			}
		}
	}
	.voice-bg{
		height: 100%;
		width: 100%;
		background-color: rgba(0,0,0,0.3);
		position: fixed;
		top: 0;
		bottom: 0;
		z-index: 1001;
		.voice-bg-length{
			height: 84rpx;
			width: 600rpx;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			background-color: rgba(255,255,255,0.2);
			border-radius: 42rpx;
			text-align: center;
		}
		.voice-bg-time{
			display: inline-block;
			min-width: 40rpx;
			line-height: 84rpx;
			background-color: $uni-color-primary;
			border-radius: 42rpx;
		}
		.voice-del{
			position: absolute;
			text-align: center;
			width: 100%;
			bottom: 150rpx;
			color: #FFFFFF;
			font-size: $uni-font-size-base;
			margin-bottom:env(safe-area-inset-bottom);
		}
	}
	.voiceBgColor{
		background-color: #F5F5F5;
	}
</style>
